﻿@page "/components/toolbar"

<DocsPage>
    <DocsPageHeader Title="ToolBar" SubTitle="Guidance and suggestions for using toolbar with MudBlazor."/>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="ToolBar Example">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ToolBarExample" Block="true" FullWidth="true">
                <ToolBarExample />
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="ToolBar Wrap Content Example">
                <Description>The <CodeInline>MudToolBar</CodeInline> component provides a flexible and versatile layout for organizing content. By setting the <CodeInline>WrapContent</CodeInline> property to true, the ToolBar is granted the ability to wrap its content based on the available space. This means that if the content within the ToolBar exceeds the width of the container, it will automatically wrap onto the next line to ensure optimal display and prevent overflow. Enabling <CodeInline>WrapContent</CodeInline> offers a responsive behavior, allowing the ToolBar to adapt dynamically to different screen sizes and ensure that all content remains visible and accessible to the user.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ToolBarWrapContentExample" Block="true">
                <ToolBarWrapContentExample />
            </SectionContent>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
